<template>
    <div class="">
        <el-tooltip content="点我，我可厉害了！" effect="light" placement="top">
            <div @click="openDrawer()" class="handle_open_ele">
                <el-icon style="">
                    <Opportunity />
                </el-icon>
            </div>
        </el-tooltip>
        <el-drawer v-model="state.drawer" title="厉害的工具栏" direction="rtl">
            <ul class="tools_list">
                <li class="cursor_pointer" :class="{ cur: 1 === state.activeindex }" @click="settools(1)">单词转换</li>
            </ul>
            <!-- <el-tooltip :content="state.nailState ? '取消总是显示' : '总是显示'" effect="light" placement="top">
                <div @click="setNail" class="nail_icon" :class="{ 'cur': state.nailState }">
                    <el-icon>
                        <Flag />
                    </el-icon>
                </div>
            </el-tooltip> -->
        </el-drawer>
        <el-dialog v-model="state.wordVisible" title="字母转换" width="50%" height="500px" destroy-on-close center>
            <el-row>
                <el-col :span="24">
                    <el-input type="textarea" clearable style="margin-bottom: 10px" placeholder="请输入"
                        v-model="state.transformWord" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-divider content-position="left">快捷按钮</el-divider>
                    <el-button type="success" plain @click="turnWords(4, state.transformWord)">获取code</el-button>
                </el-col>
            </el-row>
            <el-row class="line_row">
                <el-col :span="24">
                    <el-divider content-position="left"></el-divider>
                    <el-button type="primary" plain @click="turnWords(2, state.transformWord)">全大写</el-button>
                    <el-button @click="turnWords(3, state.transformWord)">全小写</el-button>
                </el-col>
            </el-row>
            <el-row class="line_row">
                <el-col :span="24">
                    <el-button @click="turnWords(0, state.transformWord, '_')">驼峰转下划线</el-button>
                    <el-button @click="turnWords(0, state.transformWord, '-')">驼峰转中横线</el-button>
                    <el-button @click="turnWords(0, state.transformWord, ' ')">驼峰转空格</el-button>
                </el-col>
            </el-row>
            <el-row class="line_row">
                <el-col :span="24">
                    <el-button @click="turnWords(1, state.transformWord, '_')">下划线转驼峰</el-button>
                    <el-button @click="turnWords(1, state.transformWord, '-')">中横线转驼峰</el-button>
                    <el-button @click="turnWords(1, state.transformWord, ' ')">空格转驼峰</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { humpTo, toCamel } from '@/utils/index.ts';
import { ElMessage } from 'element-plus';

const state = reactive({
    activeindex: undefined,
    wordVisible: false,//单词转换弹窗
    transformWord: "",//转换内容
    drawer: false,
    nailState: false,
});
const init = () => { };
onMounted(() => {
    init()
});
// 打开面板
const openDrawer = () => {
    state.drawer = true
}

// 驼峰转任意字符
const stringHumpTo = (str, line) => {
    state.transformWord = humpTo(str, line);
}
// 任意字符转驼峰
const stringToCamel = (str, line) => {
    state.transformWord = toCamel(str, line);
}
// 全大写
const allToUpperCase = (str) => {
    state.transformWord = str.toUpperCase();
}
// 全小写
const allToLowerCase = (str) => {
    state.transformWord = str.toLowerCase();
}
// 获得code
const getCode = (str) => {
    stringHumpTo(str, '_');
    allToUpperCase(state.transformWord)
}
const turnWords = (type, str, line) => {
    if (!str && str != '0') {
        ElMessage.error('没词打死我也转不出来！')
        return false;
    }
    const arr = [
        stringHumpTo,
        stringToCamel,
        allToUpperCase,
        allToLowerCase,
        getCode];
    arr[type](str, line)
}
// 设置工具
const settools = (type) => {
    state.activeindex = type;
    state.wordVisible = true;
}
</script>

<style scoped>
.line_row {
    margin-bottom: 10px;
    font-size: 14px;
}

.handle_open_ele {
    width: 50px;
    height: 40px;
    position: fixed;
    right: 0;
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    border-radius: 35px 0 0 35px;
    background: #409eff;
    cursor: pointer;
}

.tools_list li {
    font-size: 14px;
    line-height: 26px;
    text-align: left;
    cursor: pointer;
}

.tools_list li.cur {
    color: #409eff;
}
</style>
